import React, { Component } from 'react';

import styles from './component.m.less'
class Header extends Component {
    render() {
        return (
            <div className="page-index-header">
                <img className="img1" src='webApp/images/bg@3x.png'></img>
                <img className="img2" src='webApp/images/LOGO@3x.png'></img>
                <img className="img3" src='webApp/images/xsksxt@3x.png'></img>
            </div>
        )
    }
}

class Text extends Component {
    render() {
        return (
            <div className="page-index-content-text">
                <div className="dash"></div>
                <p className="need-know">考生须知</p>
                <ul>
                    {this.props.list.map((item, index) => {
                        if (index === 1) {
                            const arr = item.split('_');
                            return <li key={index}>{arr[0]}<span className="page-index-content-text-duration">{this.props.time}</span>{arr[1]}</li>
                        }
                        if (index === 2) {
                            const arr = item.split('_');
                            return <li key={index}>{arr[0]}<span>{'开始考试'}</span>{arr[1]}</li>
                        }
                        return <li key={index}>{item}</li>
                    })}
                </ul>
            </div>
        )
    }
}

class Items extends Component {
    constructor(props) {
        super(props);
        this.data = { name: '', phone: '' };
        this.timer = null;
    }

    componentDidMount() {
        this.props.onRef(this);
    }

    setName = (e) => {
        this.data.name = e.target.value;
    }

    setPhone = (e) => {
        this.data.phone = e.target.value;
    }

    render() {
        return (
            <div className="page-index-content-items">
                <div className="subject">
                    <span className="subject-text">考试科目：</span>
                    <span className="subject-value">{this.props.subjectName}</span>
                </div>
                <div className="name">
                    <span className="name-text">姓名：</span>
                    <input onChange={this.setName} type="text" className="name-input" placeholder="请输入姓名"></input>
                </div>
                <div className="phone">
                    <span className="phone-text">手机号：</span>
                    <input onChange={this.setPhone} type="text" className="phone-input" placeholder="请输入手机号"></input>
                </div>
            </div>
        )
    }
}

class Button extends Component {
    render() {
        return (
            <div className="begin" onClick={this.props.jump}>开始考试</div>
        )
    }
}

class Tip extends Component {
    render() {
        return (
            <div onClick={this.props.changeTip} className={styles.page_inner_tip} >
                {this.props.info}
            </div>
        )
    }
}

class Confirm extends Component {
    render() {
        return (
            <div className={styles.page_inner_confirm}>
                <div className={styles.confirm_box}>
                    <div className={styles.confirm_msg}>
                        {this.props.msg}
                    </div>
                    {
                        typeof (this.props.info) === 'object' ?
                            <div className={styles.confirm_btns}>
                                <div onClick={this.props.callBack[0]} className={styles.btn1}>
                                    {this.props.info[0]}
                                </div>
                                <div onClick={this.props.callBack[1]} className={styles.btn2}>
                                    {this.props.info[1]}
                                </div>
                            </div>
                            :
                            <div className={styles.confirm_btn}>
                                <div onClick={this.props.callBack} className={styles.btn3}>
                                    {this.props.info}
                                </div>
                            </div>
                    }
                </div>
            </div>
        )
    }
}

export {
    Header,
    Items,
    Text,
    Button,
    Tip,
    Confirm
}